<template>
  <div>
    <parents v-if="parent.parent" :parent="parent.parent"></parents>
    <div class="parentBar">
      <div class="parentBarMain">
        <div class="user">
          {{parent.user.nickname}}
          <span>1小时前</span>
        </div>
        <span class="reply"  :data-replyId="parent.id" >回复</span>
      </div>
      <p class="parentContent">{{parent.content}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["parent"],
  name: "parents"
};
</script>

<style lang="less" scoped>
.parentBar {
  padding: 4.444vw;
  border: 1px solid #ccc;
  .parentBarMain {
    display: flex;
    justify-content: space-between;
    .user {
      display: flex;
      align-items: center;
      font-size: 5vw;
    }
    span {
      padding-left: 1.389vw;
      color: #707070;
    }
  }
  .parentContent {
    padding-top: 2.778vw;
    font-size: 5.556vw;
  }
}
</style>